<template>
  <div>
    <div class="gui-padding bgf">
      <!--导航区域-->
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>船员管理</a-breadcrumb-item>
          <a-breadcrumb-item>船员资料</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <!--搜索区域-->
      <div class="mb10 flex align-items justify-content-between">
        <div class="flex">
<!--          <a href="/模板-船员资料导入模板(船员云系统).xlsx" class="mr5"><a-button type="primary" size="small"> <template #icon><ArrowDownOutlined /> </template>下载导入模板</a-button></a>-->
          <div class="copy-btn" @click="handleClipboardText($event)" data-clipboard-target="#copyhtml"><a-button type="primary" size="small"> <template #icon><CopyOutlined /></template>复制添加链接</a-button></div>
          <div id="copyhtml" style="position: fixed;top:-1000px;">
            http://www.kaiheng.top/adduser?sid={{userState.systemId}}
          </div>
          <span class="ml10">
            <a-checkbox v-model:checked="showChecked" @change="handleChangeBtn">查看历史记录</a-checkbox>
          </span>
        </div>
        <a-form layout="inline" autocomplete="off" ref="searchFormRef" :model="queryParams">
          <a-form-item label="船员姓名：" name="xingMing">
            <a-input v-model:value.trim="queryParams.xingMing" size="small" style="width: 160px"
                     placeholder="请输入船员姓名" allow-clear/>
          </a-form-item>
          <a-form-item label="身份证号：" name="shenFenHao">
            <a-input v-model:value.trim="queryParams.shenFenHao" size="small" style="width: 160px"
                     placeholder="请输入身份证号" allow-clear/>
          </a-form-item>
          <a-form-item>
            <div class="flex">
              <a-button type="primary" size="small" @click="handleSearch">
                <SearchOutlined/>
                搜索
              </a-button>
              <a-button type="primary" danger size="small" @click="handleReset" class="ml10">
                <UndoOutlined/>
                重置
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <!--表格区域-->
      <a-table :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 268px)' }"
               :pagination="false"
               :data-source="tableData"
               size="small" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'xingMing'">
            <a href="javascrcipt:void(0);" :class="[record.shiFouCunZai=='是'?'red':'']"
               :title="[record.shiFouCunZai=='是'?'已存在':'']"
               @click="handleShowEdit(record)">{{ record.xingMing }}</a>
          </template>
          <template v-if="column.dataIndex === 'shenFenHao'">
            <cc-id-card :idcard="record.shenFenHao"></cc-id-card>
          </template>
          <template v-if="column.dataIndex === 'zhuangTai'">
            <span>{{record.zhuangTai}}</span>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations" v-show="!showChecked">
              <span class="mr5">
                  <a-popconfirm title="你确定执行此操作吗?" @confirm="handleChangeUpdateStatus(record,'status')">
                     <a-button type="primary" size="small"> <template #icon><CheckOutlined /></template>审核通过</a-button>
                  </a-popconfirm>
              </span>
<!--              <span class="mr5">-->
<!--               <a-button type="primary" size="small" @click="handleEdit(record.id)"> <template #icon><EditOutlined-->
<!--                   style="font-size:12px"/></template>编辑</a-button>-->
<!--              </span>-->
<!--              <span>-->
<!--              <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">-->
<!--               <a-button type="primary" size="small" danger> <template #icon><CloseOutlined-->
<!--                   style="font-size:12px"/></template>删除</a-button>-->
<!--              </a-popconfirm>-->
<!--            </span>-->
            </div>
          </template>
        </template>
      </a-table>
      <!--分页区域-->
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            :show-total="total => `共 ${total} 项`"
            show-size-changer
            :total="total"/>
      </div>
      <add-info ref="addRef" @success="handleLoadData"></add-info>
      <edit-info ref="editRef" @success="handleLoadData"></edit-info>
      <show-info ref="showRef" @success="handleLoadData"></show-info>
    </div>
  </div>
</template>
<script lang="ts" setup>
import AddInfo from './compoments/AddInfo.vue'
import ShowInfo from './compoments/ShowInfo.vue'
import EditInfo from './compoments/EditInfo.vue'
import Clipboard from "clipboard";
const searchFormRef = ref(null)
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const addLoading = ref(false)
const addRef = ref({})
const showRef = ref({})
const editRef = ref({})
const userState = useStore.userState()
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const showChecked = ref(false)
const queryParams = reactive({
  "pageNo": 1,
  "pageSize": 20,
  "shenFenHao": null,
  "xingMing": null,
  "zhuangTai":"未审核",
  "status": 0
})

const handleChangeBtn = ()=>{
  queryParams.pageNo = 1
  queryParams.zhuangTai = showChecked.value ? "已审核":"未审核"
  handleLoadData()
}

// 获取选择的行id
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

// 定义表格的列信息
const columns = [
  {
    title: '序号',
    fixed: "left",
    align: "center",
    width: 60,
    dataIndex: 'index',
    customRender: ({text, record, index}) => index + 1
  },
  {
    title: '船员姓名',
    align: "center",
    dataIndex: 'xingMing',
    width: '180px',
  },
  {
    title: '身份证号',
    align: 'center',
    dataIndex: 'shenFenHao',
    width: '200px',
  },
  {
    title: '手机号',
    align: "center",
    dataIndex: 'shouJiHao',
    width: '100px',
  },
  {
    title: '职位',
    dataIndex: 'zhiWei',
    align: 'center',
    width: '100px',
  },
  {
    title: '证书等级',
    dataIndex: 'zhengShuDengJi',
    align: 'center',
    width: '80px',
  },
  {
    title: '状态',
    dataIndex: 'zhuangTai',
    align: 'center',
    width: '80px',
  },
  {
    title: '申请时间',
    dataIndex: 'createTime',
    align: 'center',
    width: '80px',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: "center",
    fixed: "right",
    width: '100px',
  },
];
const handleReset = () => {
  searchFormRef.value.resetFields()
  handleLoadData()
}

// 查询表格信息
const handleLoadData = async () => {
  tableLoading.value = true
  const resp = await useLoadChuanYuanSHApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

const handleChangeUpdateStatus = async (record) => {
  await useTongGuoChuanYuanSHApi(record.id)
  useMessage().success("审核通过!")
  handleLoadData()
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1;
  handleLoadData()
}

// 改变分页
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}


const handleOpenAdd = () => {
  addRef.value.handleOpen()
}

const handleEdit = (id) => {
  editRef.value.handleOpen(id)
}


const handleShowEdit = (record) => {
  console.log("record",record);
  console.log("record.chuanYuanId",record.chuanYuanId);
  if (record.chuanYuanId && record.chuanYuanId  > 0) {
    editRef.value.handleOpen(record.chuanYuanId)
  } else {
    notification.success({
      "message": "提示",
      "description": "该船员未存在船员库中，无法查看"
    })
  }
}

const handleDelete = async (id) => {
  try {
    await useDelChuanBoXinXiApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  } catch (e) {
    useMessage().error(e.msg)
  }
}

// 导入xls回调
const handleUploadSuccess = () => {
  useMessage().success("导入成功")
  queryParams.pageNo = 1
  handleLoadData()
}


// 复制
const handleClipboardText = (e) => {
  const clipboard = new Clipboard('.copy-btn')
  // 复制成功
  clipboard.on('success', () => {
    useMessage().success('复制成功')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    useMessage().error('复制失败')
    // 释放内存
    clipboard.destroy()
  })
}

onMounted(() => {
  handleLoadData()
})

</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
